<div class="form-group clearfix">
  <div class="pull-left form-inline">
    <button type="button" class="btn btn-default" (click)="showAddModal();">新建角色</button>
  </div>
</div>

<div>
  <nz-spin [nzTip]="'正在读取角色列表...'" [nzSpinning]="_isSpinning" [nzSize]="'large'" class="admin-spin">
    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>角色名称</th>
        <th>角色状态</th>
        <th>描述</th>
        <th>创建时间</th>
        <th>修改时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of roleList.list">
        <td>{{item.id}}</td>
        <td>{{item.role_name}}</td>
        <td>{{item.role_status == 1 ? '启用中':'停用'}}</td>
        <td>{{item.description}}</td>
        <td>{{item.created_at}}</td>
        <td>{{item.updated_at}}</td>
        <td>
          <a href="javascript:;" (click)="showEditModal(item.id)">编辑</a> - <a href="javascript:;"
                                                                              (click)="showDelModal(item.id)">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </nz-spin>
  <div class="text-center">
    <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage"
                [(ngModel)]="currentPage"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                [boundaryLinks]="true" class="pagination-sm"></pagination>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow"
                  (promptIsShow)="promptIsShow($event)"></app-notification>

<!-- 添加角色 -->
<div class="modal fade" bsModal #addModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">{{ editId ? '编辑角色' : '添加角色'}}<span style="color:red;">(如果1级权限勾选了,2级权限必须勾选一个)</span></h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #addRoleForm="ngForm" (ngSubmit)="editId ? editRoleSubmit() : addRoleSubmit();">
          <div class="form-group clearfix">
            <label class="col-md-2">角色名称</label>
            <div class="col-md-6" style="position: relative;">
              <input type="text" class="form-control" id="role_name" [(ngModel)]="addRole.role_name" name="role_name" (ngModelChange)="checkLength($event);"
                     required>
              <span style="position: absolute;left:100%;top:50%;white-space: nowrap;transform: translateY(-50%)">角色名称至少3个字符</span>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">角色描述</label>
            <div class="col-md-6">
              <input type="text" class="form-control" id="description" [(ngModel)]="addRole.description"
                     name="description">
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">
              权限配置
            </label>
            <div class="col-md-6">
              <p-tree #t [data]="p_list" [canChecked]="true" [singleChecked]="false" [cascadeChecked]="true"
                      [singleCheckedNodeId]="singleCheckedNodeId"
                      (onClick)="onClick($event);"
                      (onCheckChanged)="onCheckChanged($event)"></p-tree>
            </div>
          </div>

          <div class="form-group clearfix" *ngIf="editId">
            <label class="col-md-2">角色状态</label>
            <div class="col-md-6">
              <label nz-checkbox [(ngModel)]="role_status" [ngModelOptions]="{standalone: true}">
                <span>{{ role_status ? '启用': '停用' }}</span>
              </label>
            </div>
          </div>

          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="addModal.hide();nameError = false;">取消</button>
            <button class="btn btn-success btn-md-long" type="submit" [disabled]="!addRoleForm.form.valid || nameError">{{ editId != null ? '修 改': '提 交' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 修改角色 -->
<!--<div class="modal fade" bsModal #editModal="bs-modal" tabindex="-1">-->
<!--<div class="modal-dialog modal-lg">-->
<!--<div class="modal-content">-->
<!--<div class="modal-header">-->
<!--<h4 class="modal-title pull-left">修改角色</h4>-->
<!--<button type="button" class="close pull-right" aria-label="Close" (click)="editModal.hide()">-->
<!--<span aria-hidden="true">&times;</span>-->
<!--</button>-->
<!--</div>-->
<!--<div class="modal-body">-->
<!--<form #editRoleForm="ngForm" (ngSubmit)="editRoleSubmit()">-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-2">角色名称</label>-->
<!--<div class="col-md-6">-->
<!--<input type="text" class="form-control" id="name" [(ngModel)]="roleInfo.name" name="name" required>-->
<!--<div [hidden]="editRoleForm.controls.name?.valid || editRoleForm.controls.name?.pristine"-->
<!--class="alert alert-danger">-->
<!--<p *ngIf="editRoleForm.controls.name?.errors?.required">必须输入</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-2">角色</label>-->
<!--<div class="col-md-6">-->
<!--<input type="text" class="form-control" id="slug" [(ngModel)]="roleInfo.role_name" name="role_name" required>-->
<!--<div [hidden]="editRoleForm.controls.role_name?.valid || editRoleForm.controls.role_name?.pristine"-->
<!--class="alert alert-danger">-->
<!--<p *ngIf="editRoleForm.controls.role_name?.errors?.required">必须输入</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-2">角色描述</label>-->
<!--<div class="col-md-6">-->
<!--<input type="text" class="form-control" id="description" [(ngModel)]="roleInfo.description"-->
<!--name="description">-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-2">权限</label>-->
<!--<div class="col-md-6">-->
<!--<p-tree #t [data]="p_list" [canChecked]="true" [singleChecked]="false" [cascadeChecked]="true"-->
<!--[singleCheckedNodeId]="singleCheckedNodeId"-->
<!--(onClick)="onClick($event);"-->
<!--(onCheckChanged)="onCheckChanged($event)"></p-tree>-->
<!--</div>-->
<!--</div>-->
<!--<div class="text-center mt20">-->
<!--<button class="btn btn-default btn-md-long" type="button" (click)="editModal.hide()">取　消</button>-->
<!--<button class="btn btn-success btn-md-long" type="submit" [disabled]="!editRoleForm.form.valid">提　交</button>-->
<!--</div>-->
<!--</form>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--权限绑定-->
<div class="modal fade" bsModal #staticModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">角色绑定权限</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="col-md-10">
            <form class="col-md-12" #statusForm="ngForm" (ngSubmit)="rolePermissionEdit()">
              <p-tree #t [data]="p_list" [canChecked]="true" [singleChecked]="false" [cascadeChecked]="true"
                      [singleCheckedNodeId]="singleCheckedNodeId"
                      (onClick)="onClick($event);"
                      (onCheckChanged)="onCheckChanged($event)"></p-tree>
              <fieldset>
                <div class="text-center mt20">
                  <button type="submit" class="btn btn-success btn-md-long">提　交</button>
                  <a class="btn btn-default btn-md-long" (click)="staticModal.hide()">关　闭</a>
                </div>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" bsModal #deleteModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">确认</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>确定删除吗？</p>
        <div class="text-right mt20">
          <button class="btn btn-default btn-md-long" type="button" (click)="deleteModal.hide()">取消</button>
          <button class="btn btn-success btn-md-long" type="button" (click)="delRole();">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>

